<template>
  <div class="echarts_2_container">
    <div id="echarts_2"></div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'

const showorders = () => {
  var charDom = document.getElementById('echarts_2')
  var myChart = echarts.init(charDom)

  //当 鼠标移到线条上时触发
  myChart.on('mousemove', function (params) {
    window.selectSeries = params.seriesName
  })
  //当 鼠标移出线条时触发 ，如果不处理这个，鼠标移到空白上还有tooltip显示。
  myChart.on('mouseout', function (params) {
    window.selectSeries = ''
  })

  // 指定图标的配置项和数据
  var option = {
    title: {
      text: '工时分析',
      padding: [15, 0, 0, 20], // 标题的位置偏移
      textStyle: {
        fontSize: 15,
        color: '#2B3674'
      }
    },
    tooltip: {
      trigger: 'axis',
      // 自定义tooltip内容样式
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'line', // 默认为直线，可选为：'line' | 'shadow' 'cross'
        lable: {}
      },
      formatter: function (params) {
        var res = ''
        for (var i = 0; i < params.length; i++) {
          var series = params[i]
          if (series.seriesName == window.selectSeries) {
            res = series.marker + series.seriesName + ': ' + series.value + 'H' + '<br/>'
            break
          }
        }
        return res
      }
    },
    legend: {
      // 图例
      data: ['合同', '运维', '预研', '自研', '其他', '总工时'],
      x: 'left',
      y: 'top',
      icon: 'rect', // 图例前的小图标
      textStyle: {
        // 图例字体大小
        fontSize: 10,
        fontWeight: 700,
        color: '#2B3674'
      },
      itemHeight: 3, // 修改icon图形大小
      orient: 'vertical', // 垂直排列
      padding: [50, 0, 0, 20] // 设置图例具体位置
    },
    grid: {
      // 图表的位置偏移
      left: '15%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLine: { show: false }, // 去掉X轴线
      axisTick: { show: false }, // 去掉刻度
      axisLabel: { interval: 0 } // 设置x轴数据的间距
    },
    yAxis: {
      type: 'value',
      splitLine: { show: false }, // 去掉网格线
      axisTick: { show: false }, // 去掉刻度
      show: true // 去掉y轴数据
    },
    series: [
      {
        name: '合同',
        type: 'line',
        data: [20, 30, 40, 50, 10, 33.55],
        smooth: true, // 曲线
        lineStyle: {
          color: '#5833ff',
          // 设置折线阴影
          shadowOffsetX: 0, // 折线的X偏移
          shadowOffsetY: 5, // 折线的Y偏移
          shadowBlur: 9, // 折线模糊
          shadowColor: 'rgba(76, 36, 255, 0.3)' //折线颜色
        }, // 设置颜色
        symbol: 'emptyCircle', // 空心小圆点
        itemStyle: {
          // 设置折线的小圆点颜色
          color: '#5833ff'
        },
        // 隐藏小圆点
        showSymbol: false
      },
      {
        name: '运维',
        type: 'line',
        data: [11, 22, 33, 44, 55, 66, 77],
        smooth: true, // 曲线
        lineStyle: {
          color: '#409eff',
          // 设置折线阴影
          shadowOffsetX: 0, // 折线的X偏移
          shadowOffsetY: 5, // 折线的Y偏移
          shadowBlur: 9, // 折线模糊
          shadowColor: 'rgba(64, 158, 255, 0.3)' //折线颜色
        }, // 设置颜色
        symbol: 'emptyCircle', // 空心小圆点
        itemStyle: {
          // 设置折线的小圆点颜色
          color: '#409eff'
        },
        // 隐藏小圆点
        showSymbol: false
      },
      {
        name: '预研',
        type: 'line',
        data: [23, 45, 12, 45, 56, 33, 45],
        smooth: true, // 曲线
        lineStyle: {
          color: '#01b574',
          // 设置折线阴影
          shadowOffsetX: 0, // 折线的X偏移
          shadowOffsetY: 5, // 折线的Y偏移
          shadowBlur: 9, // 折线模糊
          shadowColor: 'rgba(42, 205, 114, 0.3)' //折线颜色
        }, // 设置颜色
        symbol: 'emptyCircle', // 空心小圆点
        itemStyle: {
          // 设置折线的小圆点颜色
          color: '#01b574'
        },
        // 隐藏小圆点
        showSymbol: false
      },
      {
        name: '自研',
        type: 'line',
        data: [45, 34, 12, 45, 23, 45, 22],
        smooth: true, // 曲线
        lineStyle: {
          color: '#cb7bf4',
          // 设置折线阴影
          shadowOffsetX: 0, // 折线的X偏移
          shadowOffsetY: 5, // 折线的Y偏移
          shadowBlur: 9, // 折线模糊
          shadowColor: 'rgba(203, 123, 244,0.3)' //折线颜色
        }, // 设置颜色
        symbol: 'emptyCircle', // 空心小圆点
        itemStyle: {
          // 设置折线的小圆点颜色
          color: '#cb7bf4'
        },
        // 隐藏小圆点
        showSymbol: false
      },
      {
        name: '其他',
        type: 'line',
        data: [34, 22, 12, 43, 45, 34, 23],
        smooth: true, // 曲线
        lineStyle: {
          color: '#6ad2ff',
          // 设置折线阴影
          shadowOffsetX: 0, // 折线的X偏移
          shadowOffsetY: 5, // 折线的Y偏移
          shadowBlur: 9, // 折线模糊
          shadowColor: 'rgba(106, 210, 255, 0.3)' //折线颜色
        }, // 设置颜色
        symbol: 'emptyCircle', // 空心小圆点
        itemStyle: {
          // 设置折线的小圆点颜色
          color: '#6ad2ff'
        },
        // 隐藏小圆点
        showSymbol: false
      },
      {
        name: '总工时',
        type: 'line',
        data: [22, 33, 43, 45, 56, 67, 23],
        smooth: true, // 曲线
        lineStyle: {
          color: '#ccffff',
          // 设置折线阴影
          shadowOffsetX: 0, // 折线的X偏移
          shadowOffsetY: 5, // 折线的Y偏移
          shadowBlur: 9, // 折线模糊
          shadowColor: 'rgba(204, 255, 255, 0.3)' //折线颜色
        }, // 设置颜色
        symbol: 'emptyCircle', // 空心小圆点
        itemStyle: {
          // 设置折线的小圆点颜色
          color: '#ccffff'
        },
        // 隐藏小圆点
        showSymbol: false
      }
    ]
  }
  myChart.setOption(option)
  // 根据页面大小自动响应图表大小
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}

onMounted(() => {
  showorders()
})
</script>
<style lang="less">
.echarts_2_container {
  #echarts_2 {
    width: 900px;
    height: 400px;
  }
}
</style>
